<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #login {
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
<textarea cols="300" rows="350"></textarea>
<img width="100px" id="login" src="https://cdn2.lmonkey.com/img/20191111114704.jpg">
<script>
    var log = document.getElementById("login");



    var y = log.offsetTop;
    var x = log.offsetLeft;
    var time = null;

    var xs = 5;
    var ys = 5;

    var l = 0;
    var t = 0;

    function sta() {
        time = setInterval(function () {
            x += xs;
            y += ys;
            console.log(document.documentElement.clientHeight)
            if (x < 0 || x > (document.documentElement.clientWidth - log.offsetWidth)) {
                xs = -xs;
            }
            if (y < 0 || y > (document.documentElement.clientHeight - log.offsetHeight)) {
                ys = -ys;
            }
            log.style.top = y + l + "px";//图片的顶部距离+页面滚动条的高
            log.style.left = x + t + "px";
        }, 100)
    }

    window.onscroll = function () {
        t = document.documentElement.scrollLeft;
        l = document.documentElement.scrollTop;
    }
    log.onmouseover=function(){
        clearInterval(time);
    }
    log.onmouseout=function(){
        sta();
    }
    window.onload = function () {
        sta();
    }
</script>
</body>
</html>